<template>
    <view class="container">
		<navbar @clickLeft="toHome" fixed leftIcon="left" :title="'备份助记词'" shadow></navbar>
        <view class="content">
            <view class="export-tips nav-row-start-start">
                <icon-font src="wallet-p-exclamation" width="28rpx" height="25rpx" style="margin-right: 19rpx; display: inline-block"/>
                <view class="export-tips-text">请勿将助记词在联网环境下分享及储存，例如社交应用、邮箱、相册等。</view>
            </view>
            <view class="divide-line"/>
            <view class="tip-title">
               请按照顺序将助记词抄写在纸上并妥善保管
            </view>
            <view class="mnemonic-area" v-if="mnemonic">
                {{mnemonic}}
            </view>
            <view class="attention">
                注：官方客服不会以任何形式索要您的助记词。
            </view>
			<view class="next-btn m-t-20" @click="toHome">
				返回首页
			</view>
			<!--<view class="next-btn" @click="next">
				下一步
			</view>-->
        </view>
    </view>
</template>
<script>
	import navbar from '@/components/uni-nav-bar'
    import { aboutWallet } from "@/common/businessCommon";
    import { mapState, mapMutations } from "vuex"

    export default {
        components: {navbar},
        data() {
            return {
                mnemonic: '',
            }
        },
        computed: {
            ...mapState(['walletList']),
        },
        methods: {
            ...mapMutations(['setMnemonicWords']),
          async getMnemonic(walletAddress, password){
              let walletDetail = this.walletList.find((item) => { return item.address === walletAddress}) || {};
              if(walletDetail.type !== 'mnemonic'){
                 throw  new Error('该钱包没有私钥')
              }
              let walletInfo = await aboutWallet.getWalletInfo(walletAddress, password);
              this.mnemonic = walletInfo.mnemonic;
          },
            next(){
                this.setMnemonicWords(this.mnemonic);
                uni.navigateTo({
                    url: `/pages/wallet/verifyMnemonicWord?type=2`
                })
            },
			toHome(){
				uni.reLaunch({
				    url: '/pages/home/index',
				});
			}
        },
		
        onLoad(option){
            if(!option.address || !option.password){
                throw new Error('没传递地址和密码');
            }
            this.getMnemonic(option.address, option.password);
        }
    }
</script>
<style scoped lang="scss">
    *{
        box-sizing: border-box;
    }
    .container{
        height: 100%;
        background: #fff;
    }
    .content{
        padding: 0 32rpx;
        .export-tips{
            margin-top: 51rpx;
            .export-tips-text{
                width: 633rpx;
                color: #3E2AD1;
                font-size: 26rpx;
                line-height: 35rpx;
                flex: 1;
            }
        }
        .divide-line{
            border-top: 1rpx solid #DDD;
            margin: 51rpx 0 49rpx;
        }
        .tip-title {
            width: 686rpx;
            color: #333;
            font-size: 26rpx;
            line-height: 25rpx;
            display: flex;
            align-items: center;
            &::before {
                content: '';
                display: inline-block;
                position: relative;
                margin-right: 24rpx;
                width: 14rpx;
                height: 14rpx;
                border-radius: 50%;
                background-color: #3E2AD1;
            }
        }
        .mnemonic-area{
            width: 686rpx;
            border: 1rpx solid #B0B0B4;
            padding: 24rpx  46rpx;
            line-height: 46rpx;
            margin-top: 54rpx;
            color: #666;
            font-size: 30rpx;
        }
        .attention{
            margin-top: 29rpx;
            color: #999;
            font-size: 26rpx;
        }
    }
	.next-btn {
		width: 686rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: 500;
		background-color: #3E2AD1;
		margin-top: 80rpx;
		// margin-bottom: 80rpx;
		border-radius: 20rpx;
	}
</style>
